<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-CN">
  <head>
		<title>自定义事件 — Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<script src="/js/jquery-3.1.0.min.js" type="text/javascript"></script>

    <link rel="icon" href="/images/logo.png" type="image/png">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="/manifest.json">

    <!-- <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'> -->

    <link href="/css/font-awesome.min.css" tppabs="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- main page styles -->
    <link rel="stylesheet" href="/css/page.css" tppabs="https://cn.vuejs.org/css/page.css">

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="/js/vue.js" ></script>


  </head>

<body class="docs">

<div id="header">
	<a id="logo" href="https://cn.vuejs.org/">
		<img src="/images/logo.png" tppabs="https://cn.vuejs.org/images/logo.png">
		<span>Vue.js</span>
	</a>

	<ul id="nav">
	<li class="nav-dropdown-container learn">
		<a class="nav-link current">学习</a><span class="arrow"></span>
		<ul class="nav-dropdown">
			<li> 
			<ul>
				<li><a href="index.htm" tppabs="https://cn.vuejs.org/v2/guide/" class="nav-link current">教程</a></li>
				<li><a href="https://cn.vuejs.org/v2/api/" class="nav-link">API</a></li>
				<li><a href="https://cn.vuejs.org/v2/style-guide/" class="nav-link">风格指南 (beta)</a></li>
				<li><a href="https://cn.vuejs.org/v2/examples/" class="nav-link">示例</a></li>
			</ul> 
			</li>
		</ul>
	</li>

	<li class="nav-dropdown-container ecosystem">
		<a class="nav-link">生态系统</a> 
		<span class="arrow"></span>

		<ul class="nav-dropdown">
			<li><h4>帮助</h4></li>
			<li> 
			<ul>
				<li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
				<li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
			</ul> 
			</li>

			<li><h4>工具</h4></li>
			<li>
				<ul>
					<li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
					<li><a href="https://vuejs-templates.github.io/webpack" class="nav-link" target="_blank">webpack 模板</a></li>
					<li><a href="https://vue-loader.vuejs.org/" class="nav-link" target="_blank">Vue Loader</a></li>
				</ul>
			</li>
			<li><h4>核心插件</h4></li>
			<li><ul>
				<li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
				<li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
				<li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
			</ul></li>
			<li><h4>信息</h4></li>
			<li><ul>
				<li><a href="https://news.vuejs.org/" class="nav-link" target="_blank">周刊</a></li>
				<li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
				<li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
				<li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
				<li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
			</ul></li>
			<li><h4>资源列表</h4></li>
			<li><ul>
				<li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
				<li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
				<li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
			</ul></li>
		</ul>
	</li>
	</ul>

</div>


<div id="main" class="fix-sidebar">
	<div class="sidebar">
		<div class="sidebar-inner">
			<div class="list">
	<ul class="menu-root">
		<li><h3>基础</h3></li>
    
    <li id="installation" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/installation"  class="sidebar-link">安装</a>
			<ul class="menu-sub">
				<li>
					<a class="section-link" data-scroll="" href="/Vue/installation#Vue-Devtools">Vue Devtools</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/installation#直接用-lt-script-gt-引入">直接用 &lt;script&gt; 引入</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/installation#CDN">CDN</a>
					</li>
				</ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/installation#NPM">NPM</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/installation#命令行工具-CLI">命令行工具</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/installation#对不同构建版本的解释">对不同构建版本的解释</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/installation#术语">术语</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/installation#运行时-编译器-vs-只包含运行时">运行时 + 编译器 vs. 只包含运行时</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/installation#开发环境-vs-生产环境模式">开发环境 vs. 生产环境模式</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/installation#CSP-环境">CSP 环境</a>
					</li>
				</ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/installation#开发版本">开发版本</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/installation#Bower">Bower</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/installation#AMD-模块加载器">AMD 模块加载器</a>
				</li>
			</ul>
    </li>

    <li id="index" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/index" class="sidebar-link">介绍</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/index#Vue-js-是什么">Vue.js 是什么</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/index#起步">起步</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/index#声明式渲染">声明式渲染</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/index#条件与循环">条件与循环</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/index#处理用户输入">处理用户输入</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/index#组件化应用构建">组件化应用构建</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/index#与自定义元素的关系">与自定义元素的关系</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/index#准备好了吗？">准备好了吗？</a>
  </li>
</ul>
    </li>

    <li id="instance" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/instance" class="sidebar-link">Vue 实例</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/instance#创建一个-Vue-实例">创建一个 Vue 实例</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/instance#数据与方法">数据与方法</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/instance#实例生命周期钩子">实例生命周期钩子</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/instance#生命周期图示">生命周期图示</a>
  </li>
</ul>
    </li>

    <li id="syntax" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/syntax" class="sidebar-link">模板语法</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/syntax#插值">插值</a>
  </li>
  <ul>
    <li>
		<a class="section-link" data-scroll="" href="/Vue/syntax#文本">文本 {{msg}}/v-text</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/syntax#原始-HTML">原始HTML v-html</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/syntax#特性">特性 / 属性</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/syntax#使用-JavaScript-表达式">使用 JavaScript 表达式</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/syntax#指令">指令</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/syntax#参数">参数</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/syntax#修饰符">修饰符</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/syntax#缩写">缩写</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/syntax#v-bind-缩写">v-bind缩写 / :</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/syntax#v-on-缩写">v-on 缩写 / @</a>
    </li>
  </ul>
</ul>
    </li>

    <li id="computed" class="sidebar-menu">
			<i class="">＋</i>
     <a href="/Vue/computed" tppabs="https://cn.vuejs.org/v2/guide/computed.html" class="sidebar-link">计算属性和侦听器</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/computed#计算属性">计算属性</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/computed#基础例子">基础例子</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/computed#计算属性缓存-vs-方法">计算属性缓存 vs 方法</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/computed#计算属性-vs-侦听属性">计算属性 vs 侦听属性</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/computed#计算属性的-setter">计算属性的 setter</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/computed#侦听器">侦听器</a>
  </li>
</ul>
    </li>

    <li id="class-and-style" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/class-and-style" tppabs="https://cn.vuejs.org/v2/guide/class-and-style.html" class="sidebar-link">Class 与 Style 绑定</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/class-and-style#绑定-HTML-Class">绑定 HTML Class</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/class-and-style#对象语法">对象语法</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/class-and-style#数组语法">数组语法</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/class-and-style#用在组件上">用在组件上</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/class-and-style#绑定内联样式">绑定内联样式</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/class-and-style#对象语法-1">对象语法</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/class-and-style#数组语法-1">数组语法</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/class-and-style#自动添加前缀">自动添加前缀</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/class-and-style#多重值">多重值 & Truthy</a>
    </li>
  </ul>
</ul>
    </li>

    <li id="conditional" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/conditional" tppabs="https://cn.vuejs.org/v2/guide/conditional.html" class="sidebar-link">条件渲染</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/conditional#v-if">v-if</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/conditional#在-lt-template-gt-元素上使用-v-if-条件渲染分组">在 &lt;template&gt; 元素上使用 v-if 条件渲染分组</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/conditional#v-else">v-else</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/conditional#v-else-if">v-else-if</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/conditional#用-key-管理可复用的元素">用 key 管理可复用的元素</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/conditional#v-show">v-show</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/conditional#v-if-vs-v-show">v-if vs v-show</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/conditional#v-if-与-v-for-一起使用">v-if 与 v-for 一起使用</a>
  </li>
</ul>
    </li>

    <li id="list" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/list" tppabs="https://cn.vuejs.org/v2/guide/list.html" class="sidebar-link">列表渲染</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#用-v-for-把一个数组对应为一组元素">用 v-for 把一个数组对应为一组元素</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#一个对象的-v-for">一个对象的 v-for</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#key">key</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#数组更新检测">数组更新检测</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/list#变异方法">变异方法</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/list#替换数组">替换数组</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/list#注意事项">注意事项 & set()</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#对象更改检测注意事项">对象更新检测 & set()</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#显示过滤-排序结果">显示过滤 / 排序结果</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#一段取值范围的-v-for">一段 整数 取值范围的 v-for</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#v-for-on-a-lt-template-gt">&lt;template&gt; 同时v-for多个元素</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#v-for-with-v-if">v-for with v-if</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/list#一个组件的-v-for">一个组件的 v-for</a>
  </li>
</ul>
    </li>

    <li id="events" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/events" tppabs="https://cn.vuejs.org/v2/guide/events.html" class="sidebar-link">事件处理</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/events#监听事件">监听事件</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/events#事件处理方法">事件处理方法</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/events#内联处理器中的方法">内联处理器中的方法</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/events#事件修饰符">事件修饰符</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/events#按键修饰符">按键修饰符</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/events#自动匹配按键修饰符">自动匹配按键修饰符</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/events#系统修饰键">系统修饰键</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/events#exact-修饰符">.exact 修饰符</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/events#鼠标按钮修饰符">鼠标按钮修饰符</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/events#为什么在-HTML-中监听事件">为什么在 HTML 中监听事件?</a>
  </li>
</ul>
    </li>

    <li id="forms" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/forms" tppabs="https://cn.vuejs.org/v2/guide/forms.html" class="sidebar-link">表单输入绑定</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/forms#基础用法">基础用法</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#文本">文本</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#多行文本">多行文本</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#复选框">复选框</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#单选按钮">单选按钮</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#选择框">选择框</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/forms#值绑定">值绑定</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#复选框-1">复选框</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#单选按钮-1">单选按钮</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#选择框的选项">选择框的选项</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/forms#修饰符">修饰符</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#lazy">.lazy</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#number">.number</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/forms#trim">.trim</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/forms#在组件上使用-v-model">在组件上使用 v-model</a>
  </li>
</ul>
    </li>
      

		<li><h3>组件详解</h3></li>
    <li id="components" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/components" tppabs="https://cn.vuejs.org/v2/guide/components.html" class="sidebar-link">组件基础</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/components#基本示例">基本示例</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/components#组件的复用">组件的复用</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="/Vue/components#data-必须是一个函数">data 必须是一个函数</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/components#组件的组织">组件的组织</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/components#单个根元素">单个根元素</a>
  </li>
</ul>
    </li>

    <li id="components-registration" class="sidebar-menu">
			<i class="">＋</i>
			<a href="/Vue/components-registration" class="sidebar-link">组件注册</a>  
<ul class="menu-sub">
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-registration#组件名">组件名</a>
	</li>
	<ul>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-registration#组件名大小写">组件名大小写</a>
		</li>
	</ul>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-registration#全局注册">全局注册</a>
	</li>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-registration#局部注册">局部注册</a>
	</li>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-registration#模块系统">模块系统</a>
	</li>
	<ul>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-registration#在模块系统中局部注册">在模块系统中局部注册</a>
		</li>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-registration#基础组件的自动化全局注册">基础组件的自动化全局注册</a>
		</li>
	</ul>
</ul>
		</li>





    <li id="components-props" class="sidebar-menu">
			<i class="">＋</i>
			<a href="/Vue/components-props" class="sidebar-link">通过 Prop 向子组件传数据</a>  
<ul class="menu-sub">
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-props#Prop-组件基础">组件基础</a>
	</li>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-props#Prop-的大小写-camelCase-vs-kebab-case">Prop 的大小写</a>
	</li>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-props#Prop-类型">Prop 类型</a>
	</li>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-props#传递静态或动态-Prop">传递静态或动态 Prop</a>
	</li>
	<ul>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-props#传入一个数字">传入一个数字</a>
		</li>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-props#传入一个布尔值">传入一个布尔值</a>
		</li>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-props#传入一个数组">传入一个数组</a>
		</li>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-props#传入一个对象">传入一个对象</a>
		</li>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-props#传入一个对象的所有属性">传入一个对象的所有属性</a>
		</li>
	</ul>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-props#单向数据流">单向数据流</a>
	</li>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-props#Prop-验证">Prop 验证</a>
	</li>
	<ul>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-props#类型检查">类型检查</a>
		</li>
	</ul>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-props#非-Prop-的特性">非 Prop 的特性</a>
	</li>
	<ul>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-props#替换-合并已有的特性">替换/合并已有的特性</a>
		</li>
		<li>
			<a class="section-link" data-scroll="" href="/Vue/components-props#禁用特性继承">禁用特性继承</a>
		</li>
	</ul>
</ul>
		</li>




    <li id="components-events" class="sidebar-menu">
			<i class="">＋</i>
			<a href="/Vue/components-events" class="sidebar-link">通过 事件 向父组件发消息</a>  
<ul class="menu-sub">
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components-props#Prop-组件基础">组件基础</a>
	</li>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components#使用事件抛出一个值">使用事件抛出一个值</a>
	</li>
	<li>
		<a class="section-link" data-scroll="" href="/Vue/components#在组件上使用-v-model">在组件上使用 v-model</a>
	</li>
</ul>
		</li>


    <li id="components-custom-events" class="sidebar-menu">
			<i class="">＋</i>
			<a href="/Vue/components-custom-events" class="sidebar-link">自定义事件</a>  
			<ul class="menu-sub">
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-custom-events#事件名">事件名</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-custom-events#自定义组件的-v-model">自定义组件的 v-model</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-custom-events#将原生事件绑定到组件">将原生事件绑定到组件</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-custom-events#sync-修饰符">.sync 修饰符</a>
				</li>
			</ul>
		</li>

    <li id="components-slots" class="sidebar-menu">
			<i class="">＋</i>
			<a href="/Vue/components-slots" class="sidebar-link">插槽</a>  
			<ul class="menu-sub">
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-slots#组件基础">组件基础</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-slots#插槽内容">插槽内容</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-slots#具名插槽">具名插槽</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-slots#插槽的默认内容">插槽的默认内容</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-slots#编译作用域">编译作用域</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-slots#作用域插槽">作用域插槽</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-slots#解构-slot-scope">解构 slot-scope</a>
					</li>
				</ul>
			</ul>
		</li>

    <li id="components-dynamic-async" class="sidebar-menu">
			<i class="">＋</i>
			<a href="/Vue/components-dynamic-async" class="sidebar-link">动态组件 &amp; 异步组件</a>  
			<ul class="menu-sub">
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-dynamic-async#动态组件">动态组件</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-dynamic-async#解析-DOM-模板时的注意事项">解析 DOM 模板时的注意事项</a>
					</li>
				</ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-dynamic-async#在动态组件上使用-keep-alive">在动态组件上使用 keep-alive</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-dynamic-async#异步组件">异步组件</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-dynamic-async#处理加载状态">处理加载状态</a>
					</li>
				</ul>
			</ul>
		</li>
		
    <li id="components-edge-cases" class="sidebar-menu">
			<i class="">＋</i>
			<a href="/Vue/components-edge-cases" class="sidebar-link">处理边界情况</a>  
			<ul class="menu-sub">
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#访问元素-amp-组件">访问元素 &amp; 组件</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#访问根实例">访问根实例</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#访问父级组件实例">访问父级组件实例</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#访问子组件实例或子元素">访问子组件实例或子元素</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#依赖注入">依赖注入</a>
					</li>
				</ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#程序化的事件侦听器">程序化的事件侦听器</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#循环引用">循环引用</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#递归组件">递归组件</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#组件之间的循环引用">组件之间的循环引用</a>
					</li>
				</ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#模板定义的替代品">模板定义的替代品</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#内联模板">内联模板</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#X-Templates">X-Templates</a>
					</li>
				</ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#控制更新">控制更新</a>
				</li>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#强制更新">强制更新</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vue/components-edge-cases#通过-v-once-创建低开销的静态组件">通过 v-once 创建低开销的静态组件</a>
					</li>
				</ul>
			</ul>
		</li>


		
		<li><h3>Axios http请求</h3></li>
    <li id="axios" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/axios" class="sidebar-link">Axios 使用说明</a>
    </li>



		<li><h3>过渡 & 动画</h3></li>
    <li id="transitions" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/transitions" tppabs="https://cn.vuejs.org/v2/guide/transitions.html" class="sidebar-link">进入/离开 & 列表过渡</a>
		 <ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vue/transitions#概述">概述</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vue/transitions#单元素-组件的过渡">单元素/组件的过渡</a>
			</li>
			<ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#过渡的类名">过渡的类名</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#CSS-过渡">CSS 过渡</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#CSS-动画">CSS 动画</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#自定义过渡的类名">自定义过渡的类名</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#同时使用过渡和动画">同时使用过渡和动画</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#显性的过渡持续时间">显性的过渡持续时间</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#JavaScript-钩子">JavaScript 钩子</a>
				</li>
			</ul>
			<li>
				<a class="section-link" data-scroll="" href="/Vue/transitions#初始渲染的过渡">初始渲染的过渡</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vue/transitions#多个元素的过渡">多个元素的过渡</a>
			</li>
			<ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#过渡模式">过渡模式</a>
				</li>
			</ul>
			<li>
				<a class="section-link" data-scroll="" href="/Vue/transitions#多个组件的过渡">多个组件的过渡</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vue/transitions#列表过渡">列表过渡</a>
			</li>
			<ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#列表的进入-离开过渡">列表的进入/离开过渡</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#列表的排序过渡">列表的排序过渡</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vue/transitions#列表的交错过渡">列表的交错过渡</a>
				</li>
			</ul>
			<li>
				<a class="section-link" data-scroll="" href="/Vue/transitions#可复用的过渡">可复用的过渡</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vue/transitions#动态过渡">动态过渡</a>
			</li>
		</ul>
    </li>

    <li id="transitioning-state" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/transitioning-state" tppabs="https://cn.vuejs.org/v2/guide/transitioning-state.html" class="sidebar-link">状态过渡</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="/Vue/transitioning-state#状态动画与侦听器">状态动画与侦听器</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/transitioning-state#动态状态过渡">动态状态过渡</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/transitioning-state#把过渡放到组件里">把过渡放到组件里</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="/Vue/transitioning-state#赋予设计以生命">赋予设计以生命</a>
  </li>
</ul>
    </li>


      
		<li><h3>可复用性 & 组合</h3></li>
    <li id="mixins" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/mixins" tppabs="https://cn.vuejs.org/v2/guide/mixins.html" class="sidebar-link">混入</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#基础">基础</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#选项合并">选项合并</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#全局混入">全局混入</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#自定义选项合并策略">自定义选项合并策略</a>
  </li>
</ul>
    </li>

    <li id="custom-directive" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/custom-directive" tppabs="https://cn.vuejs.org/v2/guide/custom-directive.html" class="sidebar-link">自定义指令</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#简介">简介</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#钩子函数">钩子函数</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#钩子函数参数">钩子函数参数</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#函数简写">函数简写</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#对象字面量">对象字面量</a>
  </li>
</ul>
    </li>

    <li id="render-function" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/render-function" tppabs="https://cn.vuejs.org/v2/guide/render-function.html" class="sidebar-link">渲染函数 & JSX</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#基础">基础</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#节点、树以及虚拟-DOM">节点、树以及虚拟 DOM</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#虚拟-DOM">虚拟 DOM</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#createElement-参数">createElement 参数</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#深入-data-对象">深入 data 对象</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#完整示例">完整示例</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#约束">约束</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#使用-JavaScript-代替模板功能">使用 JavaScript 代替模板功能</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#v-if-和-v-for">v-if 和 v-for</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#v-model">v-model</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#事件-amp-按键修饰符">事件 &amp; 按键修饰符</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#插槽">插槽</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#JSX">JSX</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#函数式组件">函数式组件</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#向子元素或子组件传递特性和事件">向子元素或子组件传递特性和事件</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#slots-和-children-对比">slots() 和 children 对比</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#模板编译">模板编译</a>
  </li>
</ul>
    </li>

    <li id="plugins" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/plugins" tppabs="https://cn.vuejs.org/v2/guide/plugins.html" class="sidebar-link">插件</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#使用插件">使用插件</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#开发插件">开发插件</a>
  </li>
</ul>
    </li>

    <li id="filters" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/filters" tppabs="https://cn.vuejs.org/v2/guide/filters.html" class="sidebar-link">过滤器</a>
			<ul class="menu-sub"></ul>
    </li>

		<li>
			<h3>工具</h3>
		</li>
    
    <li id="deployment" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/deployment" tppabs="https://cn.vuejs.org/v2/guide/deployment.html" class="sidebar-link">生产环境部署</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#开启生产环境模式">开启生产环境模式</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#不使用构建工具">不使用构建工具</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#使用构建工具">使用构建工具</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#模板预编译">模板预编译</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#提取组件的-CSS">提取组件的 CSS</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#跟踪运行时错误">跟踪运行时错误</a>
  </li>
</ul>
    </li>

    <li id="single-file-components" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/single-file-components" tppabs="https://cn.vuejs.org/v2/guide/single-file-components.html" class="sidebar-link">单文件组件</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#介绍">介绍</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#怎么看待关注点分离？">怎么看待关注点分离？</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#起步">起步</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#例子沙箱">例子沙箱</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#针对刚接触-JavaScript-模块开发系统的用户">针对刚接触 JavaScript 模块开发系统的用户</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#针对高级用户">针对高级用户</a>
    </li>
  </ul>
</ul>
    </li>

    <li id="unit-testing" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/unit-testing" tppabs="https://cn.vuejs.org/v2/guide/unit-testing.html" class="sidebar-link">单元测试</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#配置和工具">配置和工具</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#简单的断言">简单的断言</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#编写可被测试的组件">编写可被测试的组件</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#断言异步更新">断言异步更新</a>
  </li>
</ul>
    </li>

    <li id="typescript" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/typescript" tppabs="https://cn.vuejs.org/v2/guide/typescript.html" class="sidebar-link">TypeScript 支持</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#发布为-NPM-包的官方声明文件">发布为 NPM 包的官方声明文件</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#推荐配置">推荐配置</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#开发工具链">开发工具链</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#工程创建">工程创建</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#编辑器支持">编辑器支持</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#基本用法">基本用法</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#基于类的-Vue-组件">基于类的 Vue 组件</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#增强类型以配合插件使用">增强类型以配合插件使用</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#标注返回值">标注返回值</a>
  </li>
</ul>
    </li>


      
		<li><h3>规模化</h3></li>
    <li id="routing" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/routing" tppabs="https://cn.vuejs.org/v2/guide/routing.html" class="sidebar-link">路由</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#官方路由">官方路由</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#从零开始简单的路由">从零开始简单的路由</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#整合第三方路由">整合第三方路由</a>
  </li>
</ul>
    </li>

    <li id="state-management" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/state-management" tppabs="https://cn.vuejs.org/v2/guide/state-management.html" class="sidebar-link">状态管理</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#类-Flux-状态管理的官方实现">类 Flux 状态管理的官方实现</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#React-的开发者请参考以下信息">React 的开发者请参考以下信息</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#简单状态管理起步使用">简单状态管理起步使用</a>
  </li>
</ul>
    </li>

    <li id="ssr" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/ssr" tppabs="https://cn.vuejs.org/v2/guide/ssr.html" class="sidebar-link">服务端渲染</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#SSR-完全指南">SSR 完全指南</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#Nuxt-js">Nuxt.js</a>
  </li>
</ul>
    </li>


      
		<li><h3>内在</h3></li>
    <li id="reactivity" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/reactivity" tppabs="https://cn.vuejs.org/v2/guide/reactivity.html" class="sidebar-link">深入响应式原理</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#如何追踪变化">如何追踪变化</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#检测变化的注意事项">检测变化的注意事项</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#声明响应式属性">声明响应式属性</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#异步更新队列">异步更新队列</a>
  </li>
</ul>
    </li>

    <li id="migration" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/migration" tppabs="https://cn.vuejs.org/v2/guide/migration.html" class="sidebar-link">从 Vue 1.x 迁移</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#FAQ">FAQ</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#模板">模板</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#片段实例-移除">片段实例</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#生命周期钩子函数">生命周期钩子函数</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#beforeCompile-移除">beforeCompile</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#compiled-替换">compiled</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#attached-移除">attached</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#detached-移除">detached</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#init-重新命名">init</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#ready-替换">ready</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#v-for">v-for</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#v-for-遍历数组时的参数顺序-变更">v-for 遍历数组时的参数顺序</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#v-for-遍历对象时的参数顺序-变更">v-for 遍历对象时的参数顺序</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#index-and-key-移除">$index and $key</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#track-by-替换">track-by</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#v-for-范围值-变更">v-for 范围值</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#Props">Props</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#coerce-Prop-的参数-移除">coerce Prop 的参数</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#twoWay-Prop-的参数-移除">twoWay Prop 的参数</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#v-bind-的-once和-sync-修饰符-移除">v-bind 的 .once和.sync 修饰符</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#修改-Props-弃用">修改 Props</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#根实例的-Props-替换">根实例的 Props</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#计算属性">计算属性</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#cache-false-弃用">cache: false</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#Built-In-指令">Built-In 指令</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#v-bind-真-假值-变更">v-bind 真/假值</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#用-v-on-监听原生事件-变更">用 v-on 监听原生事件</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#带有-debounce-的-v-model移除">带有 debounce 的 v-model</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#使用-lazy-或者-number-参数的-v-model-。替换">使用 lazy 或者 number 参数的 v-model 。</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#使用内联-value的v-model-移除">使用内联 value的v-model</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#v-model-with-v-for-Iterated-Primitive-Values-移除">v-model with v-for Iterated Primitive Values</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#带有-important-的v-bind-style-移除">带有 !important 的v-bind:style</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#v-el-和v-ref-替换">v-el 和v-ref</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#v-show后面使用v-else-移除">v-show后面使用v-else</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#自定义指令-简化">自定义指令</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#指令-literal-修饰符-移除">指令 .literal 修饰符</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#过渡">过渡</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#transition-参数-替换">transition 参数</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#可复用的过渡-Vue-transition-替换">可复用的过渡 Vue.transition</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#过渡的-stagger-参数-移除">过渡的 stagger 参数</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#事件">事件</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#events-选项-移除">events 选项</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Vue-directive-39-on-39-keyCodes-替换">Vue.directive('on').keyCodes</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#dispatch-和-broadcast-替换">$dispatch 和 $broadcast</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#过滤器">过滤器</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#插入文本之外的过滤器-移除">插入文本之外的过滤器</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#过滤器参数符号-变更">过滤器参数符号</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#内置文本过滤器-移除">内置文本过滤器</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#双向过滤器-替换">双向过滤器</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#插槽">插槽</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#重名的插槽-移除">重名的插槽</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#slot-样式参数-移除">slot 样式参数</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#特殊属性">特殊属性</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#keep-alive-属性-替换">keep-alive 属性</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#计算插值">计算插值</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#属性内部的计算插值-移除">属性内部的计算插值</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#HTML-计算插值-移除">HTML 计算插值</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#单次绑定替换">单次绑定</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#响应">响应</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#vm-watch-changed">vm.$watch</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#vm-set-变更">vm.$set</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#vm-delete-变更">vm.$delete</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Array-prototype-set-弃用">Array.prototype.$set</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Array-prototype-remove-移除">Array.prototype.$remove</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Vue-实例上的Vue-set-和-Vue-delete移除">Vue 实例上的Vue.set 和 Vue.delete</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#替换-vm-data-移除">替换 vm.$data</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#vm-get-移除">vm.$get</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#围绕-DOM-的实例方法">围绕 DOM 的实例方法</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#vm-appendTo-移除">vm.$appendTo</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#vm-before-移除">vm.$before</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#vm-after-移除">vm.$after</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#vm-remove-移除">vm.$remove</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#底层实例方法">底层实例方法</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#vm-eval-移除">vm.$eval</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#vm-interpolate-移除">vm.$interpolate</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#vm-log-移除">vm.$log</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#实例-DOM-选项">实例 DOM 选项</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#replace-false-移除">replace: false</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#全局配置">全局配置</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#Vue-config-debug-移除">Vue.config.debug</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Vue-config-async-移除">Vue.config.async</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Vue-config-delimiters-替换">Vue.config.delimiters</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Vue-config-unsafeDelimiters-移除">Vue.config.unsafeDelimiters</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#全局-API">全局 API</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#带-el-的-Vue-extend-移除">带 el 的 Vue.extend</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Vue-elementDirective-移除">Vue.elementDirective</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Vue-partial-移除">Vue.partial</a>
    </li>
  </ul>
</ul>
    </li>

    <li id="migration-vue-router" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/migration-vue-router" tppabs="https://cn.vuejs.org/v2/guide/migration-vue-router.html" class="sidebar-link">从 Vue Router 0.7.x 迁移</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#Router-初始化">Router 初始化</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#router-start-替换">router.start</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#Route-定义">Route 定义</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#router-map-替换">router.map</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#router-on-移除">router.on</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#router-beforeEach-changed">router.beforeEach</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#subRoutes-换名">subRoutes</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#router-redirect-替换">router.redirect</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#router-alias-替换">router.alias</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#任意的-Route-属性-替换">任意的 Route 属性</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#URL-中的-Query-数组-语法-移除">URL 中的 Query 数组 [] 语法</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#Route-匹配">Route 匹配</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#一个或者更多的命名参数-改变">一个或者更多的命名参数</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#链接">链接</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#v-link-替换">v-link</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#v-link-active-替换">v-link-active</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#编程导航">编程导航</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#router-go-改变">router.go</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#路由选择：Modes">路由选择：Modes</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#hashbang-false-移除">hashbang: false</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#history-true-替换">history: true</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#abstract-true-替换">abstract: true</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#路由选项：Misc">路由选项：Misc</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#saveScrollPosition-替换">saveScrollPosition</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#root-换名">root</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#transitionOnLoad-移除">transitionOnLoad</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#suppressTransitionError-移除">suppressTransitionError</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#路由挂钩">路由挂钩</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#activate-替换">activate</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#canActivate-替换">canActivate</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#deactivate-移除">deactivate</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#canDeactivate-替换">canDeactivate</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#canReuse-false-移除">canReuse: false</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#data-替换">data</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#loadingRouteData-移除">$loadingRouteData</a>
    </li>
  </ul>
</ul>
    </li>

    <li id="migration-vuex" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/migration-vuex" tppabs="https://cn.vuejs.org/v2/guide/migration-vuex.html" class="sidebar-link">从 Vuex 0.6.x 迁移到 1.0</a>
<ul class="menu-sub">
  <li>
    <a class="section-link active" data-scroll="" href="#带字符串属性路径的-store-watch-替换">带字符串属性路径的 store.watch</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#Store-的事件触发器-移除">Store 的事件触发器</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#中间件-替换">中间件</a>
  </li>
</ul>
    </li>
      
      
		<li><h3>更多</h3></li>
    <li id="comparison" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/comparison" tppabs="https://cn.vuejs.org/v2/guide/comparison.html" class="sidebar-link">对比其他框架</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#React">React</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#运行时性能">运行时性能</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#HTML-amp-CSS">HTML &amp; CSS</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#规模">规模</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#原生渲染">原生渲染</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#MobX">MobX</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#Preact-和其它类-React-库">Preact 和其它类 React 库</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#AngularJS-Angular-1">AngularJS</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#复杂性">复杂性</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#灵活性和模块化">灵活性和模块化</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#数据绑定">数据绑定</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#指令与组件">指令与组件</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#运行时性能-1">运行时性能</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#Angular-原本的-Angular-2">Angular</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#TypeScript">TypeScript</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#运行时性能-2">运行时性能</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#体积">体积</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#灵活性">灵活性</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#学习曲线">学习曲线</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#Ember">Ember</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#Knockout">Knockout</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#Polymer">Polymer</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#Riot">Riot</a>
  </li>
</ul>
    </li>

    <li id="join" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/join" tppabs="https://cn.vuejs.org/v2/guide/join.html" class="sidebar-link">加入 Vue.js 社区</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#您将享有的资源">您将享有的资源</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#行为规范">行为规范</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#获取帮助">获取帮助</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#探索生态">探索生态</a>
    </li>
  </ul>
  <li>
    <a class="section-link" data-scroll="" href="#您可以参与的方式">您可以参与的方式</a>
  </li>
  <ul>
    <li>
      <a class="section-link" data-scroll="" href="#贡献代码">贡献代码</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#分享-并积累-您的经验">分享 (并积累) 您的经验</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#翻译文档">翻译文档</a>
    </li>
    <li>
      <a class="section-link" data-scroll="" href="#成为社区领袖">成为社区领袖</a>
    </li>
  </ul>
</ul>
    </li>

    <li id="team" class="sidebar-menu">
			<i class="">＋</i>
      <a href="/Vue/team" tppabs="https://cn.vuejs.org/v2/guide/team.html" class="sidebar-link">认识团队</a>
<ul class="menu-sub">
  <li>
    <a class="section-link" data-scroll="" href="#the-core-team">核心团队</a>
  </li>
  <li>
    <a class="section-link" data-scroll="" href="#community-partners">社区伙伴</a>
  </li>
</ul>
    </li>
</ul>

			</div>
		</div>
	</div>

	 
<div class="content guide with-sidebar components-custom-events-guide">
  
    
      <div id="ad">
  <!-- <script
    async
    type="text/javascript"
    src="//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg"
    id="_carbonads_js">
  </script> -->
  <a href="https://studio.qcloud.coding.net/campaign/favorite-plugins/?utm_source=vue.js&amp;utm_content=ad1116" target="_blank">
    <img src="/images/coding-net-ad.jpg">
  </a>
</div>

    
  
  
    <h1>自定义事件</h1>
  
  
    <blockquote>
<p>该页面假设你已经阅读过了<a href="components.html">组件基础</a>。如果你还对组件不太了解，推荐你先阅读它。</p>
</blockquote>
<h2 id="事件名"><a href="#事件名" class="headerlink" title="事件名" data-scroll="">事件名</a></h2><p>不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">this</span>.$emit(<span class="string">'myEvent'</span>)</span><br></pre></td></tr></tbody></table></figure>
<p>则监听这个名字的 kebab-case 版本是不会有任何效果的：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">v-on:my-event</span>=<span class="string">"doSomething"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 <code>v-on</code> 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 <code>v-on:myEvent</code> 将会变成 <code>v-on:myevent</code>——导致 <code>myEvent</code> 不可能被监听到。</p>
<p>因此，我们推荐你<strong>始终使用 kebab-case 的事件名</strong>。</p>
<h2 id="自定义组件的-v-model"><a href="#自定义组件的-v-model" class="headerlink" title="自定义组件的 v-model" data-scroll="">自定义组件的 <code>v-model</code></a></h2> 
<blockquote>
<p>2.2.0+ 新增</p>
</blockquote>
<p>一个组件上的 <code>v-model</code> 默认会利用名为 <code>value</code> 的 prop 和名为 <code>input</code> 的事件，但是像单选框、复选框等类型的输入控件可能会将 <code>value</code> 特性用于<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value" target="_blank" rel="noopener">不同的目的</a>。<code>model</code> 选项可以用来避免这样的冲突：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.component(<span class="string">'base-checkbox'</span>, {</span><br><span class="line">  model: {</span><br><span class="line">    prop: <span class="string">'checked'</span>,</span><br><span class="line">    event: <span class="string">'change'</span></span><br><span class="line">  },</span><br><span class="line">  props: {</span><br><span class="line">    checked: <span class="built_in">Boolean</span></span><br><span class="line">  },</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;input</span></span><br><span class="line"><span class="string">      type="checkbox"</span></span><br><span class="line"><span class="string">      v-bind:checked="checked"</span></span><br><span class="line"><span class="string">      v-on:change="$emit('change', $event.target.checked)"</span></span><br><span class="line"><span class="string">    &gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>现在在这个组件上使用 <code>v-model</code> 的时候：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">base-checkbox</span> <span class="attr">v-model</span>=<span class="string">"lovingVue"</span>&gt;</span><span class="tag">&lt;/<span class="name">base-checkbox</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>这里的 <code>lovingVue</code> 的值将会传入这个名为 <code>checked</code> 的 prop。同时当 <code>&lt;base-checkbox&gt;</code> 触发一个 <code>change</code> 事件并附带一个新的值的时候，这个 <code>lovingVue</code> 的属性将会被更新。</p>
<p class="tip">注意你仍然需要在组件的 <code>props</code> 选项里声明 <code>checked</code> 这个 prop。</p>

<h2 id="将原生事件绑定到组件"> 
	<a href="#将原生事件绑定到组件" class="headerlink" title="将原生事件绑定到组件" data-scroll="">将原生事件绑定到组件</a> 
</h2> 
<blockquote>
<div><b>van:</b> 事件只能绑定在 子组件的元素上, 无法直接绑定在组件上</div>
</blockquote>
<p>普通方法需要这样操作</p>
<code class="prettyprint linenums">&lt;!--&nbsp;父组件中调用&nbsp;--&gt;<br/>&lt;child&nbsp;@click=&quot;fatherClick&quot;&gt;&lt;/click&gt;<br/><br/>&lt;!--&nbsp;子组件中&nbsp;--&gt;<br/>Vue.component('child',&nbsp;{<br/>&nbsp;&nbsp;template:&nbsp;'&lt;div&nbsp;@click=&quot;childClick&quot;&gt;Child&nbsp;Text&lt;/div&gt;',<br/>&nbsp;&nbsp;methods:&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;childClick:&nbsp;function()&nbsp;{<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$emit('click')&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;此处手动调用父组件的click事件<br/>&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;}<br/>})
</code>




<p>你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 <code>v-on</code> 的 <code>.native</code> 修饰符：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">base-input</span> <span class="attr">v-on:focus.native</span>=<span class="string">"onFocus"</span>&gt;</span><span class="tag">&lt;/<span class="name">base-input</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>在有的时候这是很有用的，不过在你尝试监听一个类似 <code>&lt;input&gt;</code> 的非常特定的元素时，这并不是个好主意。比如上述 <code>&lt;base-input&gt;</code> 组件可能做了如下重构，所以根元素实际上是一个 <code>&lt;label&gt;</code> 元素：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">  {{ label }}</span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-bind</span>=<span class="string">"$attrs"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-bind:value</span>=<span class="string">"value"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-on:input</span>=<span class="string">"$emit('input', $event.target.value)"</span></span></span><br><span class="line"><span class="tag">  &gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>这时，父级的 <code>.native</code> 监听器将静默失败。它不会产生任何报错，但是 <code>onFocus</code> 处理函数不会如你预期地被调用。</p>
<p>为了解决这个问题，Vue 提供了一个 <code>$listeners</code> 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">{</span><br><span class="line">  focus: <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{ <span class="comment">/* ... */</span> }</span><br><span class="line">  input: <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>{ <span class="comment">/* ... */</span> },</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>有了这个 <code>$listeners</code> 属性，你就可以配合 <code>v-on="$listeners"</code> 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <code>&lt;input&gt;</code> 的你希望它也可以配合 <code>v-model</code> 工作的组件来说，为这些监听器创建一个类似下述 <code>inputListeners</code> 的计算属性通常是非常有用的：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line">Vue.component(<span class="string">'base-input'</span>, {</span><br><span class="line">  inheritAttrs: <span class="literal">false</span>,</span><br><span class="line">  props: [<span class="string">'label'</span>, <span class="string">'value'</span>],</span><br><span class="line">  computed: {</span><br><span class="line">    inputListeners: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">      <span class="keyword">var</span> vm = <span class="keyword">this</span></span><br><span class="line">      <span class="comment">// `Object.assign` 将所有的对象合并为一个新对象</span></span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Object</span>.assign({},</span><br><span class="line">        <span class="comment">// 我们从父级添加所有的监听器</span></span><br><span class="line">        <span class="keyword">this</span>.$listeners,</span><br><span class="line">        <span class="comment">// 然后我们添加自定义监听器，</span></span><br><span class="line">        <span class="comment">// 或覆写一些监听器的行为</span></span><br><span class="line">        {</span><br><span class="line">          <span class="comment">// 这里确保组件配合 `v-model` 的工作</span></span><br><span class="line">          input: <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>{</span><br><span class="line">            vm.$emit(<span class="string">'input'</span>, event.target.value)</span><br><span class="line">          }</span><br><span class="line">        }</span><br><span class="line">      )</span><br><span class="line">    }</span><br><span class="line">  },</span><br><span class="line">  template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;label&gt;</span></span><br><span class="line"><span class="string">      {{ label }}</span></span><br><span class="line"><span class="string">      &lt;input</span></span><br><span class="line"><span class="string">        v-bind="$attrs"</span></span><br><span class="line"><span class="string">        v-bind:value="value"</span></span><br><span class="line"><span class="string">        v-on="inputListeners"</span></span><br><span class="line"><span class="string">      &gt;</span></span><br><span class="line"><span class="string">    &lt;/label&gt;</span></span><br><span class="line"><span class="string">  `</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>现在 <code>&lt;base-input&gt;</code> 组件是一个<strong>完全透明的包裹器</strong>了，也就是说它可以完全像一个普通的 <code>&lt;input&gt;</code> 元素一样使用了：所有跟它相同的特性和监听器的都可以工作。</p>
<h2 id="sync-修饰符"><a href="#sync-修饰符" class="headerlink" title=".sync 修饰符" data-scroll=""><code>.sync</code> 修饰符</a></h2><blockquote>
<p>2.3.0+ 新增</p>
</blockquote>
<p>在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。</p>
<p>这也是为什么我们推荐以 <code>update:myPropName</code> 的模式触发事件取而代之。举个例子，在一个包含 <code>title</code> prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：</p>
<figure class="highlight js"><table><tbody><tr><td class="code"><pre><span class="line"><span class="keyword">this</span>.$emit(<span class="string">'update:title'</span>, newTitle)</span><br></pre></td></tr></tbody></table></figure>
<p>然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">text-document</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-bind:title</span>=<span class="string">"doc.title"</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-on:update:title</span>=<span class="string">"doc.title = $event"</span></span></span><br><span class="line"><span class="tag">&gt;</span><span class="tag">&lt;/<span class="name">text-document</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>为了方便起见，我们为这种模式提供一个缩写，即 <code>.sync</code> 修饰符：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">text-document</span> <span class="attr">v-bind:title.sync</span>=<span class="string">"doc.title"</span>&gt;</span><span class="tag">&lt;/<span class="name">text-document</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p class="tip">注意带有 <code>.sync</code> 修饰符的 <code>v-bind</code> <strong>不能</strong>和表达式一起使用 (例如 <code>v-bind:title.sync=”doc.title + ‘!’”</code> 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 <code>v-model</code>。</p>

<p>当我们用一个对象同时设置多个 prop 的时候，也可以将这个 <code>.sync</code> 修饰符和 <code>v-bind</code> 配合使用：</p>
<figure class="highlight html"><table><tbody><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">text-document</span> <span class="attr">v-bind.sync</span>=<span class="string">"doc"</span>&gt;</span><span class="tag">&lt;/<span class="name">text-document</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>这样会把 <code>doc</code> 对象中的每一个属性 (如 <code>title</code>) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 <code>v-on</code> 监听器。</p>
<p class="tip">将 <code>v-bind.sync</code> 用在一个字面量的对象上，例如 <code>v-bind.sync=”{ title: doc.title }”</code>，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。</p>

  
  
</div>
		<!-- important -->

<!-- var end -->
</div>	<!-- #main -->

<script>
$('.menu-sub').hide();
let thisAction = '<?php echo (ACTION_NAME); ?>';
$('#'+thisAction+'>a').addClass('current').prev(); 
$('#'+thisAction+'>i').addClass('sidebar-tap').html('－');
$('#'+thisAction+' .menu-sub').show();


$('.sidebar-menu>i').click(function(){

	if($(this).hasClass('sidebar-tap')) {
		$(this).html('＋').toggleClass('sidebar-tap');
		$(this).siblings('.menu-sub').hide();
	}else {
		$('.sidebar-menu>i').html('＋').removeClass('sidebar-tap');
		$('.sidebar-menu .menu-sub').hide();

		$(this).html('－').toggleClass('sidebar-tap');
		$(this).siblings('.menu-sub').show();
	}
});



let href = window.location.href;
let start = href.indexOf('#');
let href2 = '';
if(start > 0) {
	href2 = href.slice(start+1);
	$('#'+thisAction+' .section-link[href="#'+href2+'"]').addClass('active');
}else {
	$('#'+thisAction+' .menu-sub .section-link:first').addClass('active');
}

let $link = $('.content .headerlink');
let $slink = $('#'+thisAction+' .menu-sub .section-link');
$('#'+thisAction+' .section-link').click(function(){
	$slink.removeClass('active');
	$(this).addClass('active');
});

let scrollArr = [];
$.each( $link, function() {
	let offset = $(this).offset();
	let thisId = $(this).attr('id');
	scrollArr.push(offset.top);
});

$(window).on('scroll', function(){
	let scrollTop = $(document).scrollTop();
	let nap = 110;
	let slength = scrollArr.length;
	let i=0;
	if(scrollTop < (scrollArr[0]-nap) ) {
	}else if(scrollTop >= scrollArr[slength-1]-nap) {
		i = slength-1;
	}else {
		for(i=0; i<scrollArr.length; i++) {
			if(scrollTop>=scrollArr[i]-nap && scrollTop<scrollArr[i+1]-nap) {
				break;
			}
		}
	}

	if($slink.eq(i).length > 0){
		$slink.removeClass('active');
		$slink.eq(i).addClass('active');
	}
});


</script>

<!-- 
		<script src="/js/smooth-scroll.min.js" tppabs="https://cn.vuejs.org/js/smooth-scroll.min.js"></script>
 -->
    <!-- main custom script for sidebars, version selects etc. -->
    <script src="/js/css.escape.js" tppabs="https://cn.vuejs.org/js/css.escape.js"></script>
		<!-- 
    <script src="/js/common.js" tppabs="https://cn.vuejs.org/js/common.js"></script>
 -->
    <!-- search -->
    <link href="/css/docsearch.min.css" tppabs="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/search.css" tppabs="https://cn.vuejs.org/css/search.css">
    <script src="/js/docsearch.min.js" tppabs="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] }
      })
    })
    </script>

    <!-- fastclick -->
    <script src="/js/fastclick.min.js" tppabs="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body)
    }, false)
    </script>
  </body>
</html>